<template>
    <div>
  <!--    头部-->
      <div style="display: flex; height: 60px; line-height: 60px; border-bottom: 1px solid #eee">
        <div style="width: 300px; display: flex; padding-left: 30px">
          <div style="width: 60px">
            <img src="../../assets/logo1.png" alt="" style="width: 100px; position: relative; top: 5px; right: 0">
          </div>
          <div style="flex: 1; text-align: center;">YY论坛</div>
        </div>
        <div style="flex: 1 ; width: 30%;">
          <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal" router>
            <el-menu-item index="/front/home">首页</el-menu-item>
            <el-menu-item index="/front/recommend">每日推荐</el-menu-item>
            <el-menu-item index="/front/article">YY论坛</el-menu-item>
            <el-menu-item index="/front/profile">个人中心</el-menu-item>
            
          </el-menu>
        </div>
        <!-- <el-input v-model="input" placeholder="请输入内容" style="width: 35%;"></el-input> -->
        <div style="width: 200px">
          <div v-if="!user.username" style="text-align: right; padding-right: 30px">
            <el-button @click="$router.push('/login')">登录</el-button>
            <el-button @click="$router.push('/register')">注册</el-button>
          </div>
          <div v-else>
            <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
              <div style="display: inline-block">
                <img :src="user.avatarUrl" alt=""
                     style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
                <span>{{ user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
              </div>
              <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                  <span style="text-decoration: none" @click="logout">退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
  
      <div style="width: 1000px; margin: 0 auto">
        <router-view @refreshUser="getUser" />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "FrontView",
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
      }
    },
    created() {
  
    },
    methods: {
      logout() {
        this.$router.push("/login")
        localStorage.removeItem("user") //去除浏览器用户信息
        localStorage.removeItem("token")
        this.$message.success("退出成功")
      },
      getUser() {
        let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
        if (username) {
          // 从后台获取User数据
          this.request.get("/user/username/" + username).then(res => {
            // 重新赋值后台的最新User数据
            this.user = res.data
          })
        }
      }
    }
  }
  </script>
  
  <style>
  .item{
    display: inline-block;
    width: 100px;
  
    text-align: center;
    cursor: pointer
  }
  .item a {
    color: 	#1E90FF;
  }
  .item:hover{
    background-color: 	LightPink;
  }
  </style>
  